<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>权限列表</title>
        <header th:replace="sys/head :: head " />
        <link rel="stylesheet" th:href="@{/X-admin/lib/layui/dtree/dtree.css}">
        <link rel="stylesheet" th:href="@{/X-admin/lib/layui/dtree/font/dtreefont.css}">
    </head>

    <body>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <!-- 左树 -->
                <div class="layui-col-sm12 layui-col-md3 layui-col-lg3">
                    <div class="layui-card">
                        <div class="layui-card-body mini-bar" id="ltTree">

                        </div>
                    </div>
                </div>
                <!-- 右表 -->
                <div class="layui-col-sm12 layui-col-md9 layui-col-lg9">
                    <div class="layui-card">
                        <div class="layui-card-body">

                            <div class="layui-form toolbar">
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label w-auto">搜索：</label>
                                        <div class="layui-input-inline mr0">
                                            <input id="edtSearch" class="layui-input" type="text" placeholder="输入关键字"/>
                                        </div>
                                    </div>
                                    <div class="layui-inline" >
                                        <button class="layui-btn icon-btn" id="btnSearchByCode">
                                            <i class="layui-icon">&#xe615;</i>权限搜索
                                        </button>
                                        <button class="layui-btn icon-btn" id="btnSearchByName">
                                            <i class="layui-icon">&#xe615;</i>名称搜索
                                        </button>
                                    </div>
                                    <div class="layui-inline">

                                        <button id="btnAdd" class="layui-btn icon-btn"  >
                                            <i class="layui-icon">&#xe654;</i>新增
                                        </button>
                                        <button id="btnDel" class="layui-btn layui-btn-danger icon-btn"  >
                                            <i class="layui-icon">&#xe640;</i>删除
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <table class="layui-table" id="rtTable" lay-filter="rtTable"></table>
                            <script type="text/html" id="toolbar">
                                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                            </script>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <script>
            var nodeId;
            layui.use(['layer', 'form', 'table', 'util', 'dtree'], function () {
                var $ = layui.jquery;
                var layer = layui.layer;
                var table = layui.table;
                var dtree = layui.dtree;
                // 渲染表格
                var ins1 = function (pid,cloumn,Keyword){
                    table.render({
                        elem: '#rtTable',
                        height: 'full-160',
                        url: appPath + '/sys/permission/list',
                        page: true,
                        cellMinWidth: 50,
                        cols: [
                            [
                                {type: 'checkbox'},
                                {field: 'name', align: 'center', sort: true, title: '名称'},
                                {field: 'permission', align: 'center', sort: true, title: '权限标识'},
                                {field: 'type', align: 'center', sort: true, title: '类型', templet: function (data) {
                                    return data.type == 1 ? "按钮" : "菜单";
                                }},
                                {field: 'sort', align: 'center', sort: true, title: '排序'},
                                {align: 'center', align: 'center', toolbar: '#toolbar', title: '操作', minWidth: 120}
                            ]
                        ],
                        where: {nodeId: pid,keyword:Keyword,cloumn:cloumn}
                    });
                }
                // 监听工具条
                table.on('tool(rtTable)', function (obj) {
                    var data = obj.data; //获得当前行数据
                    var layEvent = obj.event; //获得 lay-event 对应的值

                    if (layEvent === 'edit') { //
                        //layer.msg('点击了修改');
                        xadmin.open('添加权限',appPath + '/sys/permission/toEdit?id='+data.id, 600, 400);
                    } else if (layEvent === 'del') { // 删除
                        var deleteData = new Array();
                        deleteData.push(data.id);
                        deleteDictionary(deleteData);
                    }
                });

                // 增加
                $('#btnAdd').click(function () {
                    var param = dtree.getNowParam(dictTree);
                    if (param.nodeId) {
                        xadmin.open('添加权限', appPath + '/sys/permission/toAdd?parentId='+param.nodeId), 600, 400;
                    } else {
                        layer.msg('请选择一个节点', {icon: 2});
                    }
                });
                // 批量删除
                $('#btnDel').click(function () {
                    var checkRows = table.checkStatus('rtTable');
                    if (checkRows.data.length == 0) {
                        layer.msg('请选择要删除的数据', {icon: 2});
                    } else {
                        var deletedata = [];
                        for(var i=0;i<checkRows.data.length;i++){
                            deletedata.push(checkRows.data[i].id);
                        }
                        deleteDictionary(deletedata);
                    }
                });

                // 搜索按钮点击事件
                $('#btnSearchByCode').click(function () {
                    var value = $('#edtSearch').val();
                    ins1(nodeId,"permission",value);
                });
                // 搜索按钮点击事件
                $('#btnSearchByName').click(function () {
                    var value = $('#edtSearch').val();
                    ins1(nodeId,"name",value);
                });


                // 树形渲染
                var dictTree = dtree.render({
                    elem: '#ltTree',
                    url: appPath + '/sys/permission/treeInfo',
                    // type: 'all',
                    initLevel: '2',//默认展开层级，当该值大于level时，则会展开树的节点，直到不大于当前待展开节点的level
                    dataStyle: "layuiStyle",  //使用layui风格的数据格式
                    method: 'POST',
                    request:{nodeId:"0"},//自定义参数，组件进行参数拼接时，会将该属性的串拼接到url,然后传递到后台进行数据查询
                    response: {message:"msg", statusCode: 0}
                });
                // 树形点击事件
                dtree.on('node("ltTree")', function (obj) {
                    var data = obj.param;
                    nodeId = data.nodeId;
                    //layer.msg('你选择了：' + data.nodeId + '-' + data.context);
                    //table.reload('rtTable', {where: {nodeId: data.nodeId}});
                    ins1(nodeId,"","");
                });


                // 显示表单弹窗
                function showEditModel(data) {
                    xadmin.open('添加权限',appPath + '/sys/permission/toAdd?id='+data.id, 600, 400);
                }


                function deleteDictionary(data){
                    var postdata = {"ids":data.toString()};
                    if(data.constructor==Array||data instanceof Array){
                        $.post(
                            appPath + "/sys/permission/delAll",
                            postdata,
                            function(result){
                                if (result.code == 200) {
                                    top.layer.msg(result.msg, {icon: 1});
                                    table.reload('rtTable');
                                } else {
                                    top.layer.msg(result.msg, {icon: 2});
                                }
                            },"json"
                        );
                    }
                }


            });


        </script>
    </body>
</html>
